import React, { useContext } from "react";
import classes from "./WriteList.module.css";
import ThemeContext from "../../store/themeContext";
export default function WriteList({ item }) {
    const ctx = useContext(ThemeContext);

    return (
        <li className={classes.writeItem} style={{ backgroundColor: ctx.theme === "light" ? "#fff" : "#121212" }}>
            <div className={classes.top}>
                <div className={classes.title} style={{ color: ctx.theme === "light" ? "#2f2f2f" : "#8D8D8D" }}>
                    Reminder Date:<span>{item.writeTime}</span>
                </div>
                <div className={classes.other}>
                    <span style={{ borderColor: ctx.theme === "light" ? "#3e40bb" : "#fff" }}></span>
                    <span style={{ borderColor: ctx.theme === "light" ? "#3e40bb" : "#fff" }}></span>
                    <span style={{ borderColor: ctx.theme === "light" ? "#3e40bb" : "#fff" }}></span>
                </div>
            </div>
            <div className={classes.bottom}>
                <div className={classes.left}>
                    <strong style={{ color: ctx.theme === "light" ? "#2f2f2f" : "#fff" }}>{item.name}</strong>
                    <span>${item.money}</span>
                </div>
                <div className={classes.right}>
                    <span>Due on</span>
                    <span>{item.consumptionTime}</span>
                </div>
            </div>
        </li>
    );
}
